<template>
  <div class="scanner">
    <van-nav-bar title="任务列表" left-text="返回" @click-left="onClickLeft"></van-nav-bar>
    <van-row type="flex" justify="center">
      <van-col>
        <van-field>
          <template #input>
            <van-radio-group v-model="cycle" direction="horizontal" @change="changeCycle">
              <van-radio name="1" shape="square">当天</van-radio>
              <van-radio name="2" shape="square">两天内</van-radio>
              <van-radio name="3" shape="square">一周内</van-radio>
            </van-radio-group>
          </template>
        </van-field>
      </van-col>
    </van-row>
    <van-row>
      <van-col span="2"> </van-col>
      <van-col span="9">
        <van-field label="任务号" readonly />
      </van-col>
      <van-col span="4">
        <van-field label="任务状态" readonly />
      </van-col>
      <van-col span="3">
        <van-cell-group>
          <van-field label="数量" readonly />
        </van-cell-group>
      </van-col>
      <van-col span="6">
        <van-field label="任务时间" readonly />
      </van-col>
    </van-row>
    <div v-for="(item, index) in list" :key="index">
      <van-row>
        <van-col span="2">
          <van-field>
            <template #input>
              <van-radio-group v-model="formItemData.selectLine">
                <van-radio
                  icon-size="18px"
                  :name="
                    item.id +
                      '/' +
                      item.pickTaskCode +
                      '/' +
                      item.brandCode +
                      '/' +
                      item.bussinessType +
                      '/' +
                      item.shelvesName +
                      '/' +
                      item.taskQty +
                      '/' +
                      item.pickedQty +
                      '/' +
                      item.canPick
                  "
                />
              </van-radio-group>
            </template>
          </van-field>
        </van-col>
        <van-col span="9">
          <van-field :value="item.pickTaskCode" readonly />
        </van-col>
        <van-col span="4">
          <van-field :value="item.status" readonly />
        </van-col>
        <van-col span="3">
          <van-field :value="item.taskQty" readonly />
        </van-col>
        <van-col span="6">
          <van-field :value="item.pickedDate" readonly />
        </van-col>
      </van-row>
    </div>
    <div style="float: right; margin-top: 8px;">
      <van-button type="default" size="small" style="margin-right: 8px" @click="getTask">领取</van-button>
      <van-button type="default" size="small" style="margin-right: 8px" @click="pickDate" :disabled="pickDataDis">拣货</van-button>
      <van-button type="default" size="small" style="margin-right: 8px" @click="detail">详情</van-button>
    </div>
  </div>
</template>
<script>
import {mapGetters} from "vuex";
import {selectTaskListApi, getTaskApi} from "@/api/pickScan/taskManageHome";

export default {
  name: "taskManageHome(b2b)",
  computed: {
    ...mapGetters("user", ["userData"]),
    ...mapGetters("scanner", ["pdaScanData"])
  },
  mounted() {
    this.selectTaskList();
  },
  data() {
    return {
      //接收跳转过来的新任务数据的id
      //事件范围的单选框数据
      cycle: "1",
      list: [],
      pickDataDis: false,
      //展示的数据
      formItemData: {
        //选中数据的单选框数据
        selectLine: ""
      }
    };
  },
  watch: {
    "$route": {
      handler(route) {
        if (route.name === "taskManageHomeB2B") {
          this.cycle = "1";
          this.formItemData.selectLine = "";
          this.selectTaskList();
        }
      }
    },
    "formItemData.selectLine": function() {
      if (this.formItemData.selectLine.split("/")[7] == "1") {
        this.pickDataDis = true;
      } else {
        this.pickDataDis = false;
      }
    }
  },
  methods: {
    //根据货主、仓库、品牌、业务类型、用户、时间查询任务列表
    selectTaskList() {
      //debugger
      selectTaskListApi(
        this.$root.storerWarehouseBrand.storerId,
        this.$root.storerWarehouseBrand.warehouseId,
        this.$root.storerWarehouseBrand.brandId,
        "B2B",
        this.userData.sysUserLoginName,
        this.cycle
      ).then(response => {
        if (response.data.status) {
          this.list = response.data.data;
        } else {
          this.$toast.fail(response.data.message);
        }
      });
    },
    //改变查询周期时触发
    changeCycle() {
      this.selectTaskList();
      this.formItemData.selectLine = "";
    },
    //点击领取按钮按钮时触发
    getTask() {
      getTaskApi(
        this.$root.storerWarehouseBrand.storerId,
        this.$root.storerWarehouseBrand.warehouseId,
        this.$root.storerWarehouseBrand.brandId,
        "B2C",
        this.userData.sysUserLoginName
      ).then(response => {
        if (response.data.status) {
          this.selectTaskList();
          this.$toast.success(response.data.message);
        } else {
          this.$toast.fail(response.data.message);
        }
      });
    },
    //详情按钮
    detail() {
      if (this.formItemData.selectLine == "") {
        this.$toast.fail("请选择需要展示详情的数据行");
        return;
      }
      this.$router.push({
        name: "taskManageHomeDetail",
        params: {
          headerId: this.formItemData.selectLine.split("/")[0],
          pickTaskCode: this.formItemData.selectLine.split("/")[1],
          brandCode: this.formItemData.selectLine.split("/")[2],
          bussinessType: this.formItemData.selectLine.split("/")[3],
          shelvesName: this.formItemData.selectLine.split("/")[4],
          taskQty: this.formItemData.selectLine.split("/")[5],
          pickedQty: this.formItemData.selectLine.split("/")[6]
        }
      });
    },

    //拣货按钮
    pickDate() {
      if (this.formItemData.selectLine == "") {
        this.$toast.fail("请选择需要展示详情的数据行");
        return;
      }
      this.$router.push({
        name: "pickScanHeader",
        params: {
          pickTaskId: this.formItemData.selectLine.split("/")[0],
          pickTaskCode: this.formItemData.selectLine.split("/")[1],
          bussinessType: this.formItemData.selectLine.split("/")[3],
          shelvesName: this.formItemData.selectLine.split("/")[4],
          taskQty: this.formItemData.selectLine.split("/")[5],
          pickedQty: this.formItemData.selectLine.split("/")[6]
        }
      });
    },

    //返回方法
    onClickLeft() {
      this.$router.push({
        name: "b2cpickScan"
      });
    }
  }
};
</script>

<style lang="less"></style>
